<template>
  <div style="height: 100%">
    <div class="top-bar">
      <el-button type="primary" @click="addStgx()">新增</el-button>
    </div>
    <el-table
        :data="stgxList"
        stripe
        row-key="zzdmc"
        height="calc(100% - 28px)"
        style="width: 100%">
      <el-table-column
          label="序号"
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          label="主字段名称"
          prop="zzdmc">
        <template slot-scope="{row}">
          <span v-html="getZwmc(row.zzdmc)"></span>
        </template>
      </el-table-column>
      <el-table-column
          label="从字段名称"
          prop="czdmc">
        <template slot-scope="{row}">
          <span v-html="getZwmc(row.czdmc)"></span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="135px"
          prop="cjsj">
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="180px">
        <template slot-scope="{row}">
          <!--          <el-button @click="addStgx(row)">编辑</el-button>-->
          <el-button type="danger" @click="preDel(deleteStgx,row)" v-show="row.sfsc==='N'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <xj-dialog :title="(stgxForm.xmbm?'编辑':'新增')+'实体关系'"
               :visible="addStgxDialogVisible">
      <el-form :model="stgxForm">
        <el-form-item label="主字段名称" label-width="120px">
          <el-cascader
              separator="."
              :options="stTree"
              v-model="stgxForm.zzdmcArr"
              filterable></el-cascader>
        </el-form-item>
        <el-form-item label="从字段名称" label-width="120px">
          <el-cascader
              separator="."
              :options="stTree"
              v-model="stgxForm.czdmcArr"
              filterable></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleAddStgxBtnClick(false)">取消</el-button>
        <el-button type="primary" @click="handleAddStgxBtnClick(true)">确定</el-button>
      </div>
    </xj-dialog>
  </div>
</template>

<script>
import commonMixins from "@/mixins/commonMixins";
import XjDialog from "@/components/XjDialog";
import {mapState} from "vuex";

export default {
  name: "Stgxgl",
  components: {XjDialog},
  mixins: [commonMixins],
  data() {
    return {
      props: {
        value: '',
      },
      stgxList: [],
      stgxForm: {
        xmbm: '',
        zzdmcArr: [],
        czdmcArr: [],
      },
      addStgxDialogVisible: false,
    }
  },
  computed: {
    ...mapState(['stTree', 'stTreeObj']),
  },
  mounted() {
    this.queryStgxListByXmbm()
  },
  methods: {
    getZwmc(key) {
      let item = this.stTreeObj[key]
      return item ? `${item.zdzwmc}<br><span style="color:red;">${key}</span>` : `<span style="color:red;">${key}</span>`
    },
    async queryStgxListByXmbm() {
      this.stgxList = await this.$api.queryStgxListByXmbm({xmbm: this.xmItem.xmbm})
    },
    addStgx(stgx) {
      stgx = stgx || {
        zzdmc: "",
        czdmc: "",
      }
      this.stgxForm = {
        ...stgx,
        zzdmcArr: stgx.zzdmc.split("."),
        czdmcArr: stgx.czdmc.split(".")
      }
      this.addStgxDialogVisible = true
    },
    async deleteStgx(stgx) {
      try {
        await this.$api.deleteStgx({
          xmbm: stgx.xmbm,
          zzdmc: stgx.zzdmc,
          czdmc: stgx.czdmc
        })
        this.queryStgxListByXmbm()
        this.$message({message: "删除成功", type: "success"})
      } catch (e) {
        this.$message({message: `删除失败：${e.message}`, type: "error"})
      }
    },
    async handleAddStgxBtnClick(isConfirm) {
      if (isConfirm) {
        try {
          let zzdmc = this.stgxForm.zzdmcArr.join(".")
          if (!zzdmc) throw new Error("请选择主字段名称")
          let czdmc = this.stgxForm.czdmcArr.join(".")
          if (!czdmc) throw new Error("请选择从字段名称")

          if (this.stgxForm.xmbm) {

            this.$message({message: "修改成功", type: "success"})
          } else {
            await this.$api.addStgx({
              xmbm: this.xmItem.xmbm,
              zzdmc,
              czdmc
            })
            this.$message({message: "添加成功", type: "success"})
          }
          this.queryStgxListByXmbm()
        } catch (e) {
          return this.$message({message: e.message, type: "error"})
        }

      }
      this.addStgxDialogVisible = false
    }
  }
}
</script>
